<template>
  <view :style="appThemeStyle">
    <u-navbar
        :background="{ backgroundColor: '#F3F5FA' }"
    >
      <view class="navbar-title">
        <view
            v-if="privateChatParams.channelLabel"
            class="channel"
            :style="{ backgroundColor: privateChatParams.channelColor }"
        >{{ privateChatParams.channelLabel }}</view>
        <view class="text oneline-hide">{{ privateChatParams.shopName }}</view>
      </view>
    </u-navbar>
    <view class="chatInterface" @contextmenu.prevent="">
      <view class="scroll-view">
        <view class="history-status-wrap">
          <image v-if="history.loading" class="history-loading" src="/static/message/loading.gif"/>
          <view v-else class="history-nomore">
            <text v-if="history.hasMore">下拉获取历史消息~</text>
            <text v-else>-没有更多消息-</text>
          </view>
        </view>

        <!-- 历史消息 -->
        <private-chat-item
            v-for="(message, index) in history.messages"
            :key="message.imMessageId || index"
            :message="message"
            :message-list="history.messages"
            :index="index"
            :playing-message="playingMessage"
            :emoji="emoji"
            @editRecalledMessage="editRecalledMessage"
            @showActionPopup="showActionPopup"
            @playVideo="playVideo"
            @playAudio="playAudio"
            @order="toOrderDetail"
        />

        <!--消息记录-->
        <private-chat-item
            v-for="(message, index) in chatMessageList"
            :key="message.imMessageId || index"
            :message="message"
            :message-list="chatMessageList"
            :index="index"
            :playing-message="playingMessage"
            :emoji="emoji"
            @editRecalledMessage="editRecalledMessage"
            @showActionPopup="showActionPopup"
            @playVideo="playVideo"
            @playAudio="playAudio"
            @order="toOrderDetail"
        />

        <view class="placeholder" />
        <view class="iphone-x-height" />
      </view>
      <view class="action-box" v-if="!videoPlayer.visible && !messageSelector.visible">
        <view class="action-top">
<!--          <view @click="switchAudioKeyboard">-->
<!--            <image class="more" v-if="audio.visible" src="/static/message/jianpan.png"></image>-->
<!--            <image class="more" v-else src="/static/message/audio.png"></image>-->
<!--          </view>-->
          <view v-if="privateChatParams.orderId" class="order-btn-box" @click="toOrderDetail(privateChatParams)">订单</view>
<!--          <view v-if="audio.visible" class="record-input" @touchend.stop="onRecordEnd" @touchstart.stop="onRecordStart">-->
<!--            {{ recorderManager.recording ? '松开发送' : '按住录音' }}-->
<!--          </view>-->
          <input
              v-model="text"
              @confirm="sendTextMessage"
              class="consult-input"
              maxlength="700"
              placeholder=""
              placeholder-style="color: #b6baca;font-size: 28rpx;"
              type="text"
          />
<!--          <view @click="switchEmojiKeyboard">-->
<!--            <image class="more" v-if="emoji.visible" src="/static/message/jianpan.png"></image>-->
<!--            <image class="more" v-else src="/static/message/emoji.png"></image>-->
<!--          </view>-->
          <view @click.stop="switchQuickReplyKeyboard">
            <text v-if="quickReply.visible" class="iconfont more">&#xe6b7;</text>
            <text v-else class="iconfont more">&#xe6b9;</text>
          </view>
          <view class="iconfont more" @click.stop="showOtherTypesMessagePanel()">&#xe6ba;</view>
          <view v-if="text" class="send-btn-box">
            <text class="btn" @click.stop="sendTextMessage()">发送</text>
          </view>
        </view>
        <!--展示表情列表-->
<!--        <view class="action-bottom action-bottom-emoji" v-if="emoji.visible">-->
<!--          <image class="emoji-item" v-for="(emojiItem, emojiKey, index) in emoji.map" :key="index"-->
<!--                 :src="emoji.url + emojiItem" @click="chooseEmoji(emojiKey)"></image>-->
<!--        </view>-->
        <!--其他类型消息面板-->
        <view v-if="otherTypesMessagePanelVisible" class="action-bottom">
          <view class="more-icon">
            <image @click.stop="sendImageMessage" class="operation-icon" src="/static/message/picture.png"></image>
            <view class="operation-title">图片</view>
          </view>
          <view v-if="privateChatParams.channelId !== ChannelTypeEnum.MT.value" class="more-icon">
            <image @click.stop="sendVideoMessage" class="operation-icon" src="/static/message/video.png"></image>
            <view class="operation-title">视频</view>
          </view>
        </view>
        <!-- 快速回复消息面板 -->
        <view v-else-if="quickReply.visible" class="quick-reply-action-bottom">
          <view class="header">
            <view class="header-item">快速回复</view>
            <view class="header-item" @click.stop="showQuickReplyPopup()">
              <text class="iconfont">&#xe6dd;</text>
              <text>添加常用语</text>
            </view>
          </view>
          <scroll-view scroll-y class="scroll-list">
            <view v-for="(item, index) in quickReply.list" :key="index" class="list-item">
              <view class="text">{{ item.text }}</view>
              <view class="iconfont" @click.stop="showQuickReplyPopup(item, 'update')">&#xe6b6;</view>
              <view class="iconfont" @click.stop="showQuickReplyPopup(item, 'remove')">&#xe6c4;</view>
              <view class="send" @click.stop="sendTextMessage(item.text)">发送</view>
            </view>
          </scroll-view>
        </view>
        <view class="iphone-x-height" />
      </view>
      <view class="action-popup" @touchmove.stop.prevent v-if="actionPopup.visible">
        <view class="layer"></view>
        <view class="action-list">
          <view class="action-item" v-if="actionPopup.recallable" @click="recallMessage">撤回</view>
          <view class="action-item" @click="hideActionPopup">取消</view>
        </view>
      </view>
      <view class="record-loading" v-if="recorderManager.recording"></view>
      <video v-if="videoPlayer.visible" :src="videoPlayer.url" id="videoPlayer"
             @fullscreenchange="onVideoFullScreenChange"></video>
    </view>
    <!-- 新增/编辑常用语 -->
    <u-modal
        v-model="quickReply.popupVisible"
        :title="`${quickReply.select.id ? '编辑' : '添加'}常用语`"
        :width="560"
        show-cancel-button
        :negative-top="320"
        @confirm="updateQuickReply"
        @cancel="cancelQuickReply('popupVisible')"
    >
      <view class="quick-reply-modal">
        <textarea
            v-model="quickReply.inputText"
            placeholder="请输入"
            :adjust-position="false"
            :maxlength="50"
            :cursor-spacing="200"
            :show-confirm-bar="false"
            :cursor="50"
            placeholder-style="font-size: 30rpx; color: #CCCCCC"
        />
        <view>最多可输入50个字</view>
      </view>
    </u-modal>
    <!-- 删除常用语 -->
    <u-modal
        v-model="quickReply.deletePopupVisible"
        :show-title="false"
        content="确定删除此常用语？"
        :width="560"
        show-cancel-button
        @confirm="deleteQuickReply"
        @cancel="cancelQuickReply('deletePopupVisible')"
    />
  </view>
</template>

<script>
import EmojiDecoder from '@/common/lib/EmojiDecoder'
import RecorderManager from '@/common/lib/RecorderManager'
import store from "@/store"
import {imAction, imMessageStatus, imSenderRole, imMessageType} from "@/common/constant/im";
import {
  getPrivateHistoryMessage,
  readPrivateMessage,
  sendPrivateMessage,
  getQuickConfig,
  saveQuickReplyConfig
} from "@/api/message";
import { uploadImage, uploadVideo } from "@/api/upload";
import PrivateChatItem from "@/messagepages/message/components/private-chat-item.vue";
import Tool from "@/utils/tool";
import ChannelTypeEnum from "@/common/enum/channelType"

const recorderManager = new RecorderManager()
// 是否请求成功过常用语配置接口
let requestedQuickReply = false
// 最新获取的历史消息
let currentHistoryMessage = []
// 音频播放对象，必须用全局变量，否则无法播放
let innerAudioContext =  null

export default {
  name: 'privateChat',
  components: {PrivateChatItem},
  data() {
    const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'
    const emojiMap = {
      '[么么哒]': 'emoji_3@2x.png',
      '[乒乓]': 'emoji_4@2x.png',
      '[便便]': 'emoji_5@2x.png',
      '[信封]': 'emoji_6@2x.png',
      '[偷笑]': 'emoji_7@2x.png',
      '[傲慢]': 'emoji_8@2x.png'
    }
    return {
      ChannelTypeEnum,
      // 聊天文本框
      text: '',
      friend: null,
      to: {},// 作为createMessage的参数
      // 定义表情列表
      emoji: {
        url: emojiUrl,
        map: emojiMap,
        visible: false,
        decoder: new EmojiDecoder(emojiUrl, emojiMap),
      },
      // 是否展示‘其他消息类型面板’
      otherTypesMessagePanelVisible: false,
      orderList: {
        orders: [],
        visible: false
      },
      history: {
        messages: [],
        loading: false,
        hasMore: true
      },
      recorderManager: recorderManager,
      audio: {
        //录音按钮展示
        visible: false
      },
      playingMessage: null,
      videoPlayer: {
        visible: false,
        url: '',
        context: null
      },
      // 展示消息删除弹出框
      actionPopup: {
        visible: false,
        message: null,
        recallable: false,
      },
      // 消息选择
      messageSelector: {
        visible: false,
        messages: []
      },
      // 快捷回复
      quickReply: {
        visible: false,
        list: [],
        select: {},
        popupVisible: false,
        deletePopupVisible: false,
        inputText: ''
      }
    }
  },
  computed: {
    messageUser() {
      return store.getters.messageUser
    },
    privateChatParams() {
      return store.getters.privateChatParams
    },
    userInfo() {
      return store.getters.userInfo
    },
    tenant() {
      return store.getters.tenant
    },
    /**
     * 用户在线/离线消息
     */
    chatMessageList() {
      const tenantId = this.tenant?.id
      const { friendId, shopId } = this.privateChatParams || {}
      // 边界情况的处理
      if (!tenantId || !this.messageUser[tenantId] || !friendId) {
        return []
      }
      const tenantMessage = this.messageUser[tenantId]
      const privateChatList = tenantMessage[`${imAction.IM_PRIVATE}_${shopId}`] || []
      // 找到好友的聊天
      if (privateChatList?.length) {
        return privateChatList.find(item => item.friendId === friendId)?.messageList || []
      }
      return []
    }
  },
  watch: {
    chatMessageList: {
      handler(nVal, oVal) {
        // 消息标记为已读
        this.markReadMessage()
      },
      immediate: true,
      deep: true
    }
  },
  onLoad() {
    // 获取常用语配置
    this.getQuickConfig()
    // 拉取一次历史消息
    this.loadHistoryMessage(5, true)
  },
  onUnload() {
    requestedQuickReply = false
    currentHistoryMessage = []
    try {
      innerAudioContext?.stop()
      innerAudioContext = null
    } catch (e) {}
  },
  onShow() {
    this.otherTypesMessagePanelVisible = false
    this.emoji.visible = false
  },
  onReady() {
    // 录音监听器
    this.initRecorderListeners()
    this.videoPlayer.context = uni.createVideoContext('videoPlayer', this)
    innerAudioContext = uni.createInnerAudioContext()
    this.initialAudioPlayerListeners()
  },
  onPullDownRefresh() {
    if (!this.history.hasMore) {
      uni.stopPullDownRefresh()
      return
    }
    this.loadHistoryMessage(20, false)
  },
  methods: {
    /**
     * 初始化音频播放监听器
     */
    initialAudioPlayerListeners () {
      innerAudioContext.onEnded(() => {
        this.playingMessage = null
      })
      innerAudioContext.onStop(() => {
        this.playingMessage = null
      })
      innerAudioContext.onError(res => {
        console.log('innerAudioContext.onError', res)
        this.playingMessage = null
      })
    },
    initRecorderListeners() {
      recorderManager.onRecordComplete((file, duration) => {
        if (duration < 1000) return this.$toast('录音时间太短')
      })
    },
    /**
     * 获取常用语配置
     */
    getQuickConfig() {
      const { shopId } = this.privateChatParams
      getQuickConfig(shopId).then(res => {
        requestedQuickReply = true
        let { data } = res
        data = data || {}
        const { config } = data
        if (config) {
          this.quickReply.list = JSON.parse(config)
          return
        }
        this.quickReply.list = []
      }).catch(reason => {})
    },
    /**
     * 加载历史消息
     * @param pageSize 每次加载的条数
     * @param scrollToBottom 是否滚动到底部
     */
    loadHistoryMessage(pageSize, scrollToBottom) {
      this.history.loading = true

      const { friendId } = this.privateChatParams
      const { messages } = this.history
      let maxId = this.findMinMessageId(this.chatMessageList)
      // 如果已经有历史消息，就取第一条历史消息
      if (messages?.length) {
        maxId = this.findMinMessageId(currentHistoryMessage)
      }

      getPrivateHistoryMessage({
        friendId,
        maxId,
        size: pageSize
      }, {
        load: false,
        isPrompt: false
      }).then(res => {
        let { data } = res
        data.forEach(message => {
          try {
            message.sendTime = Number(message.sendTime || '0')
            message.content = JSON.parse(Tool.aesDecrypt(message.content))
          } catch (e) {
            console.warn('message.content', e, Tool.aesDecrypt(message.content))
          }
        })
        currentHistoryMessage = data
        // 按照发送时间正序排列
        data = data.sort((a, b) => {
          return Number(a.sendTime) - Number(b.sendTime)
        })
        this.history.messages = [...data, ...messages]
        this.history.hasMore = data.length >= pageSize
        if (scrollToBottom) {
          this.scrollToBottom()
        }
      }).catch(reason => {
        this.history.hasMore = true
      }).finally(() => {
        uni.stopPullDownRefresh()
        this.history.loading = false
      })
    },
    /**
     * 标记当前会话已读
     */
    markReadMessage() {
      const { friendId } = this.privateChatParams
      readPrivateMessage(friendId, {
        load: false,
        isPrompt: false
      }).then(() => {}).catch(() => {})
    },
    /**
     * 获取最小的imMessageId
     * @param messageList
     */
    findMinMessageId(messageList) {
      return messageList.reduce((pre, cur) => {
        if (Number(pre.imMessageId) < Number(cur.imMessageId)) {
          return pre
        }
        return cur
      }).imMessageId
    },
    /**
     * 获取商家的im用户id
     */
    findMerchantIMUserId() {
      let imUserId = ''
      if (!this.chatMessageList?.length) {
        return imUserId
      }
      for (let i = 0; i < this.chatMessageList.length; i++) {
        const { senderId, receiverId, senderRole } = this.chatMessageList[i]
        if (senderRole === imSenderRole.MERCHANT) {
          imUserId = senderId
          break
        } else if (senderRole === imSenderRole.USER || senderRole === imSenderRole.RIDER) {
          imUserId = receiverId
          break
        }
      }
      return imUserId
    },
    /**
     * 发送消息基础函数
     * @param message
     */
    sendMessage(message) {
      const { friendId, shopId, channelId } = this.privateChatParams
      const { imMessageId, content, contentType } = message
      // 组装一条新消息展示
      this.chatMessageList.push({
        imMessageId,
        shopId,
        contentType,
        thirdChannelId: channelId,
        content,
        senderRole: imSenderRole.MERCHANT,
        status: imMessageStatus.SUCCESS,
        senderId: this.findMerchantIMUserId(),
        receiverId: friendId,
        sendTime: new Date().getTime()
      })
      this.scrollToBottom()
    },
    /**
     * 发送文本消息
     */
    sendTextMessage(text = '') {
      let sendText = this.text
      if (text) {
        sendText = text
      }
      if (sendText.trim() !== '') {
        const { friendId } = this.privateChatParams
        const contentBody = { text: sendText }

        // 用于发送通知
        // const notification = {
        //   title: '您收到一条新消息',
        //   body: this.text,
        //   sound: 'message',
        //   badge: '+1'
        // }
        // if (notification.body.length >= 50) {
        //   notification.body = notification.body.substring(0, 30) + '...'
        // }
        sendPrivateMessage({
          receiverId: friendId,
          contentType: imMessageType.TEXT,
          content: JSON.stringify(contentBody)
        }, {
          load: false
        }).then(res => {
          const { code, data } = res
          if (code === 0 && data) {
            this.sendMessage({
              contentType: imMessageType.TEXT,
              imMessageId: data,
              content: contentBody
            })
            if (!text) {
              this.text = ''
            }
          }
        }).catch(reason => {})
      }
    },
    /**
     * 发送视频消息
     */
    sendVideoMessage() {
      const { friendId } = this.privateChatParams

      uni.chooseVideo({
        success: async (res) => {
          const { tempFilePath, duration, width, height, size } = res
          try {
            const uploadRes = await uploadVideo([{ path: tempFilePath, size }])
            if (!uploadRes?.length) {
              return
            }
            const { code, data } = JSON.parse(uploadRes[0])
            const fileName = data?.fileName
            const thumbnailUrl = data?.thumbnailName || ''
            if (code !== 0 || !fileName) {
              return
            }
            // 发送消息
            const contentBody = { video: fileName, thumbnailUrl, duration, width, height, size }
            const sendRes = await sendPrivateMessage({
              receiverId: friendId,
              contentType: imMessageType.VIDEO,
              content: JSON.stringify(contentBody)
            })
            if (sendRes.code !== 0) {
              return
            }
            this.sendMessage({
              contentType: imMessageType.VIDEO,
              imMessageId: sendRes.data,
              content: contentBody
            })
          } catch (e) {}
        }
      })
    },
    /**
     * 发送图片消息
     */
    sendImageMessage() {
      const { friendId } = this.privateChatParams

      // const notification = {
      //   title: '您收到一条新消息',
      //   body: '[图片消息]',		// 字段最长 50 字符
      //   sound: 'message',
      //   badge: '+1'
      // }
      uni.chooseImage({
        count: 7,
        sizeType: ['compressed'],
        success: async (res) => {
          const { tempFiles } = res
          for (let i = 0; i < tempFiles.length; i++) {
            const file = tempFiles[i]
            const { path, size } = file
            try {
              // 上传图片
              const uploadRes = await uploadImage([{ path, size }])
              if (!uploadRes?.length) {
                continue
              }
              const { code, data } = JSON.parse(uploadRes[0])
              const fileName = data?.fileName
              if (code !== 0 || !fileName) {
                continue
              }
              // 发送消息
              const contentBody = { image: fileName }
              const sendRes = await sendPrivateMessage({
                receiverId: friendId,
                contentType: imMessageType.IMAGE,
                content: JSON.stringify(contentBody)
              })
              if (sendRes.code !== 0) {
                continue
              }
              this.sendMessage({
                contentType: imMessageType.IMAGE,
                imMessageId: sendRes.data,
                content: contentBody
              })
            } catch (e) {
              console.log('-----image-----', e)
            }
          }
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    /**
     * 长摁展示弹窗操作
     * @param message
     */
    showActionPopup(message) {
      // const MAX_RECALLABLE_TIME = 3 * 60 * 1000 // 3分钟以内的消息才可以撤回
      // this.messageSelector.messages = [message]
      // if ((Date.now() - message.timestamp) < MAX_RECALLABLE_TIME && message.senderId === this.currentUser.id && message.status === 'success') {
      //   this.actionPopup.recallable = true
      // } else {
      //   this.actionPopup.recallable = false
      // }
      // this.actionPopup.visible = true
    },
    /**
     * 关闭长摁弹窗
     */
    hideActionPopup () {
      this.actionPopup.visible = false
      this.actionPopup.message = null
    },
    /**
     * 撤回消息
     */
    recallMessage() {
      this.actionPopup.visible = false
    },
    /**
     * 撤回的消息再编辑
     * @param text
     */
    editRecalledMessage(text) {
      if (this.audio.visible) {
        this.audio.visible = false
      }
      this.text = text
    },
    /**
     * 语音录制按钮和键盘输入的切换
     */
    switchAudioKeyboard() {
      if (!this.audio.visible) {
        recorderManager.authorize().then(() => {
          console.log('录音权限获取成功')
          this.audio.visible = true
        }).catch((err) => {
          console.log('err:', err)
          uni.showModal({
            title: '获取录音权限失败',
            content: '请先打开麦克风权限'
          })
        })
      } else {
        this.audio.visible = false
      }
    },
    /**
     * 开始录音
     */
    onRecordStart() {
      recorderManager.start()
    },
    /**
     * 停止录音
     */
    onRecordEnd() {
      recorderManager.stop()
    },
    /**
     * 播放视频
     * @param videoUrl
     */
    playVideo(videoUrl) {
      this.videoPlayer.visible = true
      this.videoPlayer.url = videoUrl
      this.$nextTick(() => {
        this.videoPlayer.context.requestFullScreen({
          direction: 0
        })
        this.videoPlayer.context.play()
      })
    },

    /**
     * 播放音频
     * @param audioMessage
     */
    playAudio(audioMessage) {
      // 如果点击的消息正在播放，就认为是停止播放操作
      if (this.playingMessage && this.playingMessage.imMessageId === audioMessage.imMessageId) {
        innerAudioContext.stop()
        this.playingMessage = null
        return
      }
      this.playingMessage = audioMessage
      // 多次会调用播放新的文件时，提前销毁实例，可避免-99错误
      innerAudioContext.autoplay = true
      innerAudioContext.src = audioMessage.content.voice
      innerAudioContext.play()
    },
    /**
     * 监听视频播放器全屏事件
     * @param e
     */
    onVideoFullScreenChange(e) {
      // 当退出全屏播放时，隐藏播放器
      if (this.videoPlayer.visible && !e.detail.fullScreen) {
        this.videoPlayer.visible = false
        this.videoPlayer.context.stop()
      }
    },
    messageInputFocusin() {
      this.otherTypesMessagePanelVisible = false
      this.emoji.visible = false
    },
    switchEmojiKeyboard() {
      this.emoji.visible = !this.emoji.visible
      this.otherTypesMessagePanelVisible = false
    },
    switchQuickReplyKeyboard() {
      // 之前拉取常用语失败了，需要重新拉取
      if (!this.quickReply.visible && !requestedQuickReply) {
        this.getQuickConfig()
      }
      this.quickReply.visible = !this.quickReply.visible
      this.emoji.visible = false
      this.otherTypesMessagePanelVisible = false
    },
    showOtherTypesMessagePanel() {
      this.otherTypesMessagePanelVisible = !this.otherTypesMessagePanelVisible
      this.emoji.visible = false
      this.quickReply.visible = false
    },
    chooseEmoji(emojiKey) {
      this.text += emojiKey
    },
    showOrderMessageList() {
      this.orderList.orders = []
      this.orderList.visible = true
    },
    hideOrderMessageList() {
      this.orderList.visible = false
    },
    /**
     * 滚动到底部
     */
    scrollToBottom() {
      this.$nextTick(() => {
        uni.pageScrollTo({
          scrollTop: 2000000,
          duration: 0
        })
      })
    },
    /**
     * 跳转订单详情
     * @param order
     */
    toOrderDetail(order) {
      const { orderId } = order
      if (!orderId) {
        return
      }
      this.$navTo('pages/order/detail', { orderId })
    },
    /**
     * 显示常用语弹窗
     * @param select 选中的常用语
     * @param type add/update/remove
     */
    showQuickReplyPopup(select = {}, type = 'add') {
      if (type === 'add') {
        this.quickReply.inputText = ''
        this.quickReply.select = {}
        this.quickReply.popupVisible = true
        return
      }
      if (type === 'update') {
        this.quickReply.inputText = select.text
        this.quickReply.select = select
        this.quickReply.popupVisible = true
        return
      }
      if (type === 'remove') {
        this.quickReply.select = select
        this.quickReply.deletePopupVisible = true
      }
    },
    /**
     * 更新常用语
     */
    updateQuickReply() {
      const { shopId } = this.privateChatParams
      const { inputText, list, select } = this.quickReply
      const text = inputText?.trim() || ''
      if (!text) {
        this.$toast('请填写常用语')
        return
      }
      const nList = this.$u.deepClone(list)
      if (select.id) {
        const item = nList.find(item => item.id === select.id)
        item.text = text
      } else {
        // id自增
        let id = 1
        if (nList.length) {
          id = nList[nList.length - 1].id + 1
        }
        nList.push({ id, text })
      }
      saveQuickReplyConfig(shopId, JSON.stringify(nList)).then(res => {
        const { data } = res
        if (data) {
          this.$toast('操作成功')
          this.quickReply.list = nList
          this.quickReply.popupVisible = false
          return
        }
        this.$toast('操作失败，请稍后重试！')
      }).catch(reason => {})
    },
    /**
     * 删除常用语
     */
    deleteQuickReply() {
      const { shopId } = this.privateChatParams
      const { list, select } = this.quickReply
      let nList = this.$u.deepClone(list)
      nList = nList.filter(item => item.id !== select.id)
      saveQuickReplyConfig(shopId, JSON.stringify(nList)).then(res => {
        const { data } = res
        if (data) {
          this.$toast('操作成功')
          this.quickReply.deletePopupVisible = false
          this.quickReply.list = nList
          return
        }
        this.$toast('操作失败，请稍后重试！')
      }).catch(reason => {})
    },
    /**
     * 常用语弹窗取消
     * @param type
     */
    cancelQuickReply(type) {
      this.quickReply[type] = false
    }
  }
}
</script>

<style>
page {
  height: 100%;
  background: #F3F5FA;
}
</style>

<style scoped lang="scss">
@import url('./style.scss');
</style>
